import { delJueSe, getPermission, putRights } from '@/api/permission'
import React, { useEffect, useRef, useState } from 'react'
import { Table, Space, Button, Modal, message, Tree } from 'antd'
import { DeleteOutlined, ExclamationCircleOutlined, EditOutlined } from '@ant-design/icons'
import { getRole } from '@/api/authority'
export default function Permission() {
    const [dataSource, setdataSource] = useState([])
    const [treeData, settreeData] = useState([])
    const [rights, setrights] = useState([]) // 当前需要被勾选的k
    const [isModalOpen, setisModalOpen] = useState(false)
    // 保留id
    const idRef = useRef(0)
    const columns = [
        {
            title: 'ID',
            dataIndex: 'id',
        },
        {
            title: '角色名称',
            dataIndex: 'roleName',
        },
        {
            title: '操作',
            render: (item) => {
                return (
                    <Space>
                        <Button danger shape="circle"
                            icon={<DeleteOutlined />}
                            onClick={() => {
                                confirmHandel(item)
                            }}
                        />
                        <Button type="primary" shape="circle"
                            icon={<EditOutlined />}
                            onClick={() => openHandel(item)}
                        />
                    </Space>
                )
            }
        },
    ]
    useEffect(() => {
        loadPermissionList()
    }, [])
    // 获取权限列表
    const loadPermissionList = async () => {
        const { data } = await getPermission()
        setdataSource(data)
    }
    // 获取菜单列表
    const loadRole = async () => {
        const { data } = await getRole()
        settreeData(data)
    }
    const confirmHandel = (item) => {
        Modal.confirm({
            title: '提示',
            icon: <ExclamationCircleOutlined />,
            content: '此操作将删除该角色，是否继续？',
            okText: '确认',
            onOk: () => { delHandel(item) },
            cancelText: '取消',
            onCancel: () => {
            }
        })
    }
    // 删除函数
    const delHandel = async (item) => {
        await delJueSe(item)
        message.open({
            type: 'success',
            content: '删除成功',
        })
        loadPermissionList()
    }
    const onCheck = (checkedKey) => {
        setrights(checkedKey.checked)
    }
    // 弹框打开
    const openHandel = async (item) => {
        if (treeData.length === 0) {
            await loadRole()
        }
        idRef.current = item.id
        setrights(item.rights)
        setisModalOpen(true)
    }
    // 弹框确定
    const handleOk = async () => {
        await putRights({
            id: idRef.current,
            rights
        })
        message.open({
            type: 'success',
            content: '操作成功',
        })
        setisModalOpen(false)
        loadPermissionList()

    }
    return (
        <div>
            <Table
                dataSource={dataSource}
                columns={columns}
                // tale需要设置key
                rowKey={(item) => item.id}
            />
            {/* dialog */}
            <Modal
                title="权限分配"
                open={isModalOpen}
                // onOk={handleOk}
                // onCancel={() => setisModalOpen(false)}
                footer={
                    <>
                        <Button onClick={() => setisModalOpen(false)}>取消</Button>
                        <Button onClick={handleOk}>保存</Button>                                                                              
                    </>
                }

            >
                <Tree
                    checkable
                    checkStrictly
                    checkedKeys={rights}
                    treeData={treeData}
                    onCheck={onCheck}
                />
            </Modal>
        </div>
    )
}
